﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>致我最爱的你 - 生日祝福</title>
    <!-- Tailwind CSS 引入，继续使用jsDelivr，其在国内有优化节点 -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- Font Awesome 引入，目前6.x版本稳定且免费的国内CDN较少，继续使用cdnjs.cloudflare.com -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- 引入 Google Fonts: Poppins (现代无衬线) 和 Noto Serif SC (优雅中文衬线) -->
    <!-- 替换Google Fonts的链接为国内加速镜像源，提升加载速度 -->
    <link rel="stylesheet" href="https://googlefonts.admincdn.com/css2?family=Poppins:wght@300;400;600;700&family=Noto+Serif+SC:wght@300;400;500;700&display=swap">
     
    <style>
        /* BASE STYLES & FONTS */
        body {
            /* 字体栈优化，优先系统自带字体，兼顾中英混排 */
            font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', sans-serif, serif;
            background: linear-gradient(135deg, #f0f2f5 0%, #e0e7ff 100%); /* 更柔和清新的浅色渐变背景 */
            color: #333; /* 默认深色文本 */
            overflow-x: hidden;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            line-height: 1.6;
        }
 
        /* GLASSMORPHISM UTILITIES - 优化毛玻璃效果 */
        .glassmorphism {
            background-color: rgba(255, 255, 255, 0.4); /* 适当提升透明度，更轻盈 */
            backdrop-filter: blur(20px) saturate(150%); /* 增强模糊和饱和度，更透彻 */
            -webkit-backdrop-filter: blur(20px) saturate(150%);
            border: 1px solid rgba(255, 255, 255, 0.6); /* 柔和的白色边框，增加细节 */
            box-shadow: 0 10px 40px 0 rgba(31, 38, 135, 0.15); /* 略微加重阴影，增加层次感 */
            border-radius: 16px; /* 圆角更大，更柔和 */
        }
         
        /* 背景零星点缀 - 更稀疏和微妙的星光 */
        .star {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            opacity: 0;
            animation: subtleTwinkle var(--duration) infinite ease-in-out;
            box-shadow: 0 0 6px rgba(183, 148, 244, 0.7); /* 淡淡的紫色发光 */
        }
        @keyframes subtleTwinkle {
            0%, 100% { opacity: 0.1; transform: scale(0.6); }
            50% { opacity: 0.7; transform: scale(1.2); }
        }
        #stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            background: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, transparent 70%); /* 增加一个中心发光效果 */
            animation: background-pulse 10s infinite alternate; /* 背景的微妙动态 */
        }
        @keyframes background-pulse {
            0% { background-color: #f0f2f5; }
            100% { background-color: #e0e7ff; }
        }
 
        /* 心跳动画 (更平滑，颜色更柔和) */
        .heart-beat {
            animation: heartbeat 1.5s infinite cubic-bezier(0.4, 0, 0.6, 1); 
            color: #ef4444; /* 保持红色，但可以根据整体色调调整 */
        }
        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.18); } /* 稍微放大一点，更明显 */
        }
 
        /* 情书字体 */
        .love-letter-font {
            font-family: 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', serif; /* 确保中文衬线字体优先 */
            font-weight: 400; /* 默认字重 */
        }
 
        /* 打字机效果的每个字符 - 初始隐藏 */
        .typed-char {
            opacity: 0;
            transition: opacity 0.05s linear; /* 确保渐显平滑 */
            display: inline-block; /* 确保每个字符独立占位，保留空格 */
            position: relative; /* 确保 z-index 和 transform 的上下文 */
            white-space: pre-wrap; /* 保留空白字符 */
            line-height: inherit; /* 继承父元素的行高 */
            vertical-align: bottom; /* 尝试底部对齐，减少垂直跳动 */
            /* 确保继承父元素的文字颜色和字重，防止嵌套样式被覆盖 */
            color: inherit; 
            font-weight: inherit;
        }
         
        /* 照片回忆墙项的hover效果 */
        .memory-item {
            transition: all 0.4s ease-out; 
            transform-origin: center center;
            opacity: 0; /* 初始隐藏，由JS控制入场动画 */
            transform: translateY(20px);
            /* 确保图片卡片内部布局一致 */
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* 内容上下对齐 */
        }
        .memory-item.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .memory-item:hover {
            transform: scale(1.03) rotate(0.5deg); 
            box-shadow: 0 16px 32px rgba(0,0,0,0.1); 
            z-index: 10;
        }
        .memory-item img {
            transition: transform 0.4s ease;
            width: 100%;
            object-fit: cover; 
        }
        .memory-item:hover img {
            transform: scale(1.02); 
        }
 
        /* 惊喜按钮的渐变和动画 - 柔和又吸引人 */
        .surprise-button {
            background: linear-gradient(45deg, #8b5cf6, #ec4899); /* 柔和的紫粉渐变 */
            color: white;
            padding: 1rem 2.5rem;
            border-radius: 9999px;
            font-weight: 600;
            font-size: 1.125rem;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
            opacity: 0; /* 初始隐藏 */
            transform: translateY(20px); /* 初始位移 */
        }
        .surprise-button.animate-in {
            /* 淡入动画结束后，开始跳动 */
            animation: fade-in-up 0.8s ease-out forwards var(--button-delay, 0.4s), 
                       bounce-subtle 1.8s infinite ease-in-out calc(var(--button-delay, 0.4s) + 0.8s);
        }
        .surprise-button:hover {
            transform: translateY(-5px) scale(1.03); 
            box-shadow: 0 12px 25px rgba(139, 92, 246, 0.5); 
            background: linear-gradient(45deg, #ec4899, #8b5cf6); 
        }
         
        /* Modal 动画 */
        #surpriseModal {
            position: fixed; 
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.4); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease; 
            z-index: 50; 
        }
        #surpriseModal.show {
            opacity: 1;
            visibility: visible;
        }
        #surpriseModal .modal-content {
            opacity: 0;
            transform: translateY(30px) scale(0.9);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        #surpriseModal.show .modal-content {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        #closeModal {
            transition: transform 0.3s ease, color 0.3s ease;
        }
        #closeModal:hover {
            transform: rotate(90deg) scale(1.1);
            color: #fca5a5; /* 柔和的红色 */
        }
 
        /* 响应式调整 */
        [url=home.php?mod=space&uid=945662]@media[/url] (max-width: 768px) {
            h1 { font-size: 2.8rem; }
            h2 { font-size: 1.8rem; }
            .love-letter-font { font-size: 1rem; line-height: 1.7; }
            .surprise-button { font-size: 1rem; padding: 0.8rem 2rem; }
            .modal-content h3 { font-size: 1.8rem; }
            .modal-content p { font-size: 0.9rem; }
        }
         /* 定义通用 fade-in-up 动画 */
        @keyframes fade-in-up {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
 
        .animate-fade-in-up {
            animation: fade-in-up 0.8s ease-out forwards;
        }
 
        .animate-fade-in-up.delay-2 {
            animation-delay: 0.2s;
        }
 
        .animate-fade-in-up.delay-3 {
            animation-delay: 0.4s;
        }
 
        .animate-fade-in-up.delay-4 {
            animation-delay: 0.6s; 
        }
 
        /* 为模态框内播放按钮设置延迟 */
        .animate-fade-in-up.delay-modal-btn {
            animation-delay: 0.2s;
        }
 
        @keyframes pulse-light {
            0%, 100% { opacity: 1; color: inherit; }
            50% { opacity: 0.7; color: #a78bfa; } /* 更柔和的闪烁效果 */
        }
        .animate-pulse-light {
            animation: pulse-light 2s infinite ease-in-out;
        }
 
        @keyframes pulse-slow {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        .animate-pulse-slow {
            animation: pulse-slow 2s infinite ease-in-out;
        }
        @keyframes bounce-subtle {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
        .animate-bounce-subtle {
            animation: bounce-subtle 1.8s infinite ease-in-out;
        }
    </style>
</head>
<body class="relative">
    <!-- 背景零星点缀 -->
    <div id="stars"></div>
      
    <!-- 主内容区 -->
    <div class="container mx-auto px-4 py-8 md:py-16 relative z-10 flex-grow">
        <!-- 标题区 -->
        <div class="text-center mb-8 md:mb-12">
            <h1 class="text-5xl md:text-7xl font-bold mb-4 text-purple-600 animate-fade-in-up">生日祝福</h1>
            <div class="heart-beat inline-block text-6xl text-red-500 my-4">&#10084;&#65039;</div>
            <h2 class="text-3xl md:text-4xl text-gray-700 mt-4 animate-fade-in-up delay-2">致我最爱的你 - <span class="text-purple-500 font-semibold">冰草蓝蝶</span></h2>
            <p class="text-base md:text-lg text-gray-500 animate-fade-in-up delay-3 mt-2">(请慢享这份心意)</p>
        </div>
  
        <!-- 情书区 -->
        <div class="max-w-3xl mx-auto glassmorphism p-6 md:p-10 mb-12 shadow-lg">
            <div id="loveLetter" class="love-letter-font text-lg md:text-xl text-gray-800 leading-relaxed love-letter-content relative">
                <!-- *************************************************************** -->
                <!--                          !!! 重要提示 !!!                         -->
                <!--  情书的每一段文字都已从<p>标签内部移除，并放到data-original-content属性中。 -->
                <!--  请按照此格式修改您的真实情书内容： -->
                <!--  1. 将文字内容从 <p>...</p> 剪切出来。 -->
                <!--  2. 粘贴到 data-original-content="..." 属性中。 -->
                <!--  3. 确保 <p> 标签内部保持为空。 -->
                <!--  此举是为了确保在JS开始打字机效果之前，没有任何文字在HTML中可见。 -->
                <!-- *************************************************************** -->
 
                <p class="mb-4" data-original-content="亲爱的 <span class='text-purple-600 font-medium'>”芳“</span>："></p>
                <p class="mb-4" data-original-content="当窗外微光点点，当世间万物归于宁静，我的思绪却越发清晰，只想为你写下这些。"></p>
                <p class="mb-4" data-original-content="在无数个平凡与非凡的日子里，你的存在赋予了我生命最深沉的意义。"></p>
                <p class="mb-4" data-original-content="或许我们没有电影般的浪漫开场，但每一次牵手、每一次依偎，都如同涓涓细流，汇聚成我心中永恒的爱河。"></p>
                <p class="mb-4" data-original-content="感谢你宽容我的不完美，欣赏我的小优点，成为我最坚实的后盾和最温暖的归宿。"></p>
                <p class="mb-4" data-original-content="今天，在这星光璀璨的夜晚，我想对你轻声说："></p>
                <p class="text-2xl md:text-3xl text-center text-purple-700 font-bold my-8 animate-pulse-light" data-original-content="你是我生命中最温柔的诗篇，也是我唯一想读懂的永恒。"></p>
                <p class="text-right mt-8 text-gray-700" data-original-content="愿与你共度余生的,"></p>
                <p class="text-right text-xl md:text-2xl font-bold text-pink-500" data-original-content="大鱼"></p>
                <p class="text-right text-base text-gray-500" data-original-content="79-9-1"></p>
            </div>
        </div>
  
        <!-- 照片回忆墙 -->
        <div class="mb-16">
            <h3 class="text-3xl md:text-4xl text-center mb-8 text-gray-700 love-letter-font font-semibold animate-fade-in-up delay-4">全网为你祝福</h3>
            <!-- *************************************************************** -->
            <!--                          照片网格布局重点修改!                         -->
            <!--  - 移除了lg:grid-cols-3 xl:grid-cols-4。              -->
            <!--  - JavaScript现在将根据照片数量动态计算大屏下的列数。 -->
            <!-- *************************************************************** -->
            <div id="memoryGallery" class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6">
                <!-- 请替换 'YOUR_IMAGE_URL_HERE' 为您真实的图片链接，并修改文字描述 -->
                <div class="memory-item glassmorphism rounded-lg overflow-hidden shadow-md">
                    <div class="aspect-w-16 aspect-h-9"> <!-- 确保图片比例统一 -->
                        <img src="https://s3.bmp.ovh/imgs/2025/08/30/ef7a202fc895c6f0.png" alt="平台推送" class="h-full w-full object-cover">
                    </div>
                    <div class="p-4 bg-white bg-opacity-70 text-gray-700 flex-grow">
                        <p class="text-sm font-light love-letter-font">怦然心动的感觉 | 来自平台专属惊喜</p>
                    </div>
                </div>
                <div class="memory-item glassmorphism rounded-lg overflow-hidden shadow-md">
                    <div class="aspect-w-16 aspect-h-9">
                        <img src="https://s3.bmp.ovh/imgs/2025/08/30/6d581fd5fd9906e9.png" alt="全家祝福" class="h-full w-full object-cover">
                    </div>
                    <div class="p-4 bg-white bg-opacity-70 text-gray-700 flex-grow">
                        <p class="text-sm font-light love-letter-font">每一次的生日，期待又甜蜜 | 满满的祝福</p>
                    </div>
                </div>
                <div class="memory-item glassmorphism rounded-lg overflow-hidden shadow-md">
                    <div class="aspect-w-16 aspect-h-9">
                        <img src="https://s3.bmp.ovh/imgs/2025/08/30/b4b3b4c080458a74.png" alt="生日快乐" class="h-full w-full object-cover">
                    </div>
                    <div class="p-4 bg-white bg-opacity-70 text-gray-700 flex-grow">
                        <p class="text-sm font-light love-letter-font">和你一起，看遍世界 | 生日快乐</p>
                    </div>
                </div>
                <div class="memory-item glassmorphism rounded-lg overflow-hidden shadow-md">
                    <div class="aspect-w-16 aspect-h-9">
                        <img src="https://s3.bmp.ovh/imgs/2025/08/30/22f0669b896a4dc2.png" alt="朋友祝福" class="h-full w-full object-cover">
                    </div>
                    <div class="p-4 bg-white bg-opacity-70 text-gray-700 flex-grow">
                        <p class="text-sm font-light love-letter-font">最爱那些平凡又温馨的瞬间 | 来自朋友们祝福</p>
                    </div>
                </div>
                <div class="memory-item glassmorphism rounded-lg overflow-hidden shadow-md">
                    <div class="aspect-w-16 aspect-h-9">
                        <img src="https://s3.bmp.ovh/imgs/2025/08/30/88a95942e8f7ed6d.png" alt="特别纪念" class="h-full w-full object-cover">
                    </div>
                    <div class="p-4 bg-white bg-opacity-70 text-gray-700 flex-grow">
                        <p class="text-sm font-light love-letter-font">每一个纪念日都是爱的里程碑 | 生日愿望</p>
                    </div>
                </div>
                <div class="memory-item glassmorphism rounded-lg overflow-hidden shadow-md">
                    <div class="aspect-w-16 aspect-h-9">
                        <img src="https://s3.bmp.ovh/imgs/2025/08/30/72310e8fa5da7ae6.png" alt="粉丝狂欢" class="h-full w-full object-cover">
                    </div>
                    <div class="p-4 bg-white bg-opacity-70 text-gray-700 flex-grow">
                        <p class="text-sm font-light love-letter-font">憧憬与你共度的未来  | 憧憬幸福生活</p>
                    </div>
                </div>
                <!-- 您可以复制以上div，并替换图片和文字，添加更多回忆 -->
                <!-- 如果图片数量为偶数，大屏下它会动态铺满两行 -->
            </div>
        </div>
  
        <!-- 互动区 -->
        <div class="text-center mt-12 md:mt-16">
            <button id="surpriseBtn" class="surprise-button shadow-lg animate-in" style="--button-delay: 0.3s;">
                点击福利有惊喜哦 <i class="fas fa-gift ml-2 animate-pulse-slow"></i>
            </button>
        </div>
    </div>
  
    <!-- 底部，包含情书和日期 -->
    <footer class="text-center py-6 text-gray-500 text-sm mt-auto z-10 relative">
        <p class="love-letter-font">用一生时光，写一封永远的情书</p>
        <p class="love-letter-font">2025年9月</p>
    </footer>
  
    <!-- 惊喜弹窗 -->
    <div id="surpriseModal">
        <div class="modal-content glassmorphism bg-purple-100 bg-opacity-60 p-6 md:p-10 max-w-md mx-4 relative border-purple-300 shadow-xl">
            <button id="closeModal" class="absolute top-4 right-4 text-gray-600 text-3xl hover:text-purple-600 transition-colors duration-300">×</button>
            <div class="text-center">
                <div class="heart-beat text-6xl md:text-7xl mb-6 text-red-500">&#128157;</div>
                <h3 class="text-3xl md:text-4xl font-bold mb-4 text-purple-700 love-letter-font animate-fade-in animate-pulse-light">我的心上人，看这里！</h3>
                <p class="mb-6 text-lg md:text-xl text-gray-800 love-letter-font leading-relaxed">
                    我预约你的往后每个生日，直到我们白发苍苍，
                    只愿与你相守，坐着摇椅慢慢聊
                    成为你生命中最长久的浪漫。
                    请允许我用余生来爱你，守护你。
                </p>
                <!-- 注意：我们将audio标签的preload属性设置为"none"以避免预加载 -->
                <audio id="loveSong" class="w-full mb-4 md:mb-6 rounded-lg shadow-inner" preload="none">
                    <!-- 强烈建议替换此音乐链接为自己可控的国内CDN地址，以确保加载速度和稳定性 -->
                    <source src="http://mpvideo.qpic.cn/0bc3k4cccaaewiajm5fw4zufiv6deflqiiia.f10002.mp4?dis_k=5cc0b3eeba01d4150de3f3c7cb907942&dis_t=1756543671&play_scene=10600&auth_info=c5bF4YkLbmRvruSfhFhaMzMAf248TUczNk8tMjwTdGZPMARYdT9+XHc=&auth_key=9f225c38c4a7412bfdb0c09b132175e8" type="audio/mpeg">
                    你的浏览器不支持音频播放。
                </audio>
                <!-- 模态框内的播放按钮也加入了淡入动画 -->
                <button id="playAudioBtn" class="surprise-button !py-2 !px-4 !text-base mx-auto mt-2 animate-in animate-fade-in-up delay-modal-btn" style="--button-delay: 0.2s;">
                    <i class="fas fa-play mr-2"></i> 播放我们的歌
                </button>
                <p class="text-sm md:text-base text-gray-500 love-letter-font mt-2">（点击上方按钮播放音乐）</p>
            </div>
        </div>
    </div>
  
    <script>
        // 创建背景点缀 (更稀疏和微妙)
        function createStars() {
            const starsContainer = document.getElementById('stars');
            const starCount = 80; 
              
            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                  
                const size = Math.random() * 1.5 + 0.5; 
                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
                  
                star.style.left = `${Math.random() * 100}%`;
                star.style.top = `${Math.random() * 100}%`;
                  
                star.style.setProperty('--duration', `${8 + Math.random() * 8}s`); 
                star.style.animationDelay = `${Math.random() * 6}s`;
                  
                starsContainer.appendChild(star);
            }
        }
 
        /**
         * 辅助函数：将一个DOM节点的所有文本内容递归地包装进<span class="typed-char">，
         * 同时保留原有的HTML结构和样式。所有新创建的typed-char初始为opacity:0。
         *
         * [url=home.php?mod=space&uid=952169]@Param[/url] {Node} node 待处理的原始DOM节点。
         * @param {Node} targetParentFragment 将包装后的节点添加到此DocumentFragment或元素中。
         */
        function prepareContentForTyping(node, targetParentFragment) {
            if (node.nodeType === Node.TEXT_NODE) { // 如果是文本节点
                const text = node.textContent;
                for (const char of text) {
                    const charSpan = document.createElement('span');
                    charSpan.className = 'typed-char'; // 应用CSS样式使其初始隐藏 (opacity: 0)
                    charSpan.textContent = char;
                    targetParentFragment.appendChild(charSpan);
                }
            } else if (node.nodeType === Node.ELEMENT_NODE) { // 如果是元素节点（如<span>, <a>等）
                const clonedElement = node.cloneNode(false); // 只克隆元素本身，不包括其子节点
                targetParentFragment.appendChild(clonedElement); // 先将父元素（已带有原始class）插入到fragment
 
                // 递归处理子节点
                Array.from(node.childNodes).forEach(child => prepareContentForTyping(child, clonedElement));
            }
            // 忽略注释节点、文档类型声明等
        }
 
        // 异步函数：依次执行打字机效果
        async function displayLoveLetter() {
            const paragraphs = document.querySelectorAll('#loveLetter p');
            const charDisplayDelay = 70; // 每个字符的显示间隔
            const paragraphIntervalDelay = 1200; // 每个段落之间的间隔
 
            for (let i = 0; i < paragraphs.length; i++) {
                const p = paragraphs[i];
                const originalContent = p.dataset.originalContent; // 从data属性获取原始HTML内容
                 
                if (!originalContent) { // 如果没有data-original-content，则跳过
                    console.warn(`Paragraph ${i} has no data-original-content. Skipping typewriter effect.`);
                    continue;
                }
 
                // 1. 创建一个临时的DocumentFragment来构建完整的、初始隐藏的段落结构
                const paragraphFragment = document.createDocumentFragment();
                const tempDivForParsing = document.createElement('div');
                tempDivForParsing.innerHTML = originalContent; // 使用data属性的内容进行解析
                 
                // 递归地将原始HTML内容包装成带.typed-char的结构，并放入fragment
                Array.from(tempDivForParsing.childNodes).forEach(child => prepareContentForTyping(child, paragraphFragment));
 
                // 2. 将准备好的、初始隐藏的fragment一次性插入到实时DOM的段落中
                // 由于原始HTML中<p>标签是空的，这里不需要p.innerHTML = '';
                p.appendChild(paragraphFragment);
 
                // 3. 逐个显示字符，实现打字机效果
                const allTypedCharsInParagraph = p.querySelectorAll('.typed-char');
                for (let j = 0; j < allTypedCharsInParagraph.length; j++) {
                    const charSpan = allTypedCharsInParagraph[j];
                    charSpan.style.opacity = '1'; // 使字符可见
                    await new Promise(resolve => setTimeout(resolve, charDisplayDelay + Math.random() * 30));
                }
                 
                // 4. 段落打字完成后，根据段落类型等待一定时间
                if (p.classList.contains('font-bold') && p.classList.contains('my-8')) {
                   await new Promise(resolve => setTimeout(resolve, 2500)); // 标题停留久一点
                } else {
                   await new Promise(resolve => setTimeout(resolve, paragraphIntervalDelay));
                }
            }
        }
 
        // Intersection Observer 用于照片墙入场动画
        function setupMemoryItemsObserver() {
            const memoryItems = document.querySelectorAll('.memory-item');
            const observerOptions = {
                root: null, 
                rootMargin: '0px',
                threshold: 0.1 
            };
 
            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach((entry, index) => {
                    if (entry.isIntersecting) {
                        setTimeout(() => {
                            entry.target.classList.add('is-visible');
                        }, index * 150); 
                        observer.unobserve(entry.target); 
                    }
                });
            }, observerOptions);
 
            memoryItems.forEach(item => {
                observer.observe(item);
            });
        }
         
        /**
         * 动态调整照片墙的网格列数，以适应您的“N/2列”需求。
         * 在大屏幕（lg及以上）上生效，小屏幕由Tailwind默认处理。
         */
        function applyDynamicMemoryGrid() {
            const memoryGallery = document.getElementById('memoryGallery');
            if (!memoryGallery) return;
 
            const memoryItems = memoryGallery.querySelectorAll('.memory-item');
            const itemCount = memoryItems.length;
 
            if (itemCount > 0 && itemCount % 2 === 0) { // 只有当有项目且为偶数时才应用动态布局
                const dynamicCols = itemCount / 2; // 计算大屏幕应有的列数
 
                // 定义Tailwind的lg和xl断点
                const breakpoints = {
                    lg: 1024,
                    xl: 1280
                };
 
                const mediaQueryLg = window.matchMedia(`(min-width: ${breakpoints.lg}px)`);
                const mediaQueryXl = window.matchMedia(`(min-width: ${breakpoints.xl}px)`);
 
                function updateGridColumnLayout() {
                    // 如果当前屏幕宽度达到LG或XL断点，则应用动态列数
                    if (mediaQueryLg.matches) { 
                        memoryGallery.style.gridTemplateColumns = `repeat(${dynamicCols}, minmax(0, 1fr))`;
                    } else {
                        // 否则（屏幕小于LG），移除内联样式，让Tailwind的默认响应式类（grid-cols-1 sm:grid-cols-2）生效
                        memoryGallery.style.gridTemplateColumns = '';
                    }
                }
 
                updateGridColumnLayout(); // 页面加载时立即应用一次
 
                // 监听媒体查询变化（即窗口大小跨过断点时）
                mediaQueryLg.addEventListener('change', updateGridColumnLayout);
                mediaQueryXl.addEventListener('change', updateGridColumnLayout); 
            }
        }
 
        // 页面DOM加载完成后的操作
        document.addEventListener('DOMContentLoaded', function() {
            createStars(); 
            setupMemoryItemsObserver(); 
            displayLoveLetter(); // 在DOMContentLoaded时启动打字机效果
            applyDynamicMemoryGrid(); // 在DOMContentLoaded时启动动态网格布局
        });
 
        // 惊喜按钮交互
        document.getElementById('surpriseBtn').addEventListener('click', function() {
            const modal = document.getElementById('surpriseModal');
            const modalContent = modal.querySelector('.modal-content');
            const audio = document.getElementById('loveSong');
            const playAudioBtn = document.getElementById('playAudioBtn');
 
            // 立即显示模态框并触发进入动画
            modal.classList.add('show'); 
            document.body.style.overflow = 'hidden'; // 禁止背景滚动
             
            // 确保内容动画也立即开始 
            modalContent.classList.add('opacity-1', 'scale-100'); 
            modalContent.classList.remove('opacity-0', 'scale-90'); 
 
            // 确保自定义播放按钮可见，并隐藏浏览器自带控制条（以防万一）
            playAudioBtn.classList.remove('hidden'); 
            audio.removeAttribute('controls');
        });
 
        // 音乐播放按钮监听器 
        document.getElementById('playAudioBtn').addEventListener('click', function() {
            const audio = document.getElementById('loveSong');
            // 如果音乐未加载，则手动加载
            if (audio.readyState === 0) { // HAVE_NOTHING
                audio.load(); 
            }
            audio.play().then(() => {
                this.classList.add('hidden'); // 播放成功后隐藏自定义播放按钮
                audio.controls = true; // 显示浏览器自带的控制条
            }).catch(e => {
                console.error('播放音频失败:', e);
                alert('播放音频失败，请确保音频链接有效并检查浏览器设置。部分浏览器有自动播放限制。');
                this.classList.remove('hidden'); // 如果播放失败，确保自定义按钮可见
            });
        });
 
        // 模态框关闭按钮
        document.getElementById('closeModal').addEventListener('click', function() {
            const modal = document.getElementById('surpriseModal');
            const modalContent = modal.querySelector('.modal-content');
            const playAudioBtn = document.getElementById('playAudioBtn');
             
            // 逆转动画效果
            modalContent.classList.add('opacity-0', 'scale-90');
            modalContent.classList.remove('opacity-1', 'scale-100'); 
 
            modal.classList.remove('show'); // 移除show类触发整体退出动画
             
            // 动画结束后再彻底隐藏
            setTimeout(() => {
                document.body.style.overflow = 'auto'; 
                // 暂停音乐并重置
                document.getElementById('loveSong').pause();
                document.getElementById('loveSong').currentTime = 0; 
                document.getElementById('loveSong').removeAttribute('controls'); // 隐藏控制条
                // 重置播放按钮状态
                playAudioBtn.classList.remove('hidden'); 
                // 移除模态框弹出的初始动画状态类，为下次打开做准备
                modalContent.classList.remove('opacity-1', 'scale-100'); 
                modalContent.classList.add('opacity-0', 'scale-90'); 
            }, 400); // 等待动画完成再隐藏
        });
 
        // Tailwind CSS v2.x 缺少 aspect-ratio 插件，手动添加相关 CSS
        function setupAspectRatioClasses() {
            const style = document.createElement('style');
            style.innerHTML = `
                .aspect-w-16 { --aspect-w: 16; }
                .aspect-h-9 { --aspect-h: 9; }
                .aspect-w-16.aspect-h-9 {
                    position: relative;
                    width: 100%;
                    height: 0;
                    padding-bottom: calc(var(--aspect-h) / var(--aspect-w) * 100%);
                }
                .aspect-w-16.aspect-h-9 > * {
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    top: 0;
                    left: 0;
                }
            `;
            document.head.appendChild(style);
        }
        document.addEventListener('DOMContentLoaded', setupAspectRatioClasses);
    </script>
</body>
</html>